<!-- 会话窗口公用代码 -->
<template>
    <div class="kefu-window-container">
        <template v-if="!isEmpty(kefu.state.sessionInfo)">
            <!-- 聊天记录加载态，不放在 TransitionGroup 以内，因为加载可能比过渡动画更快，loading 就无法显示了 -->
            <div v-show="kefu.state.sessionRecords.loading" class="messages-loading">
                <Icon name="el-icon-Loading" class="is-loading" />
            </div>

            <!-- 聊天记录 -->
            <TransitionGroup @scroll="transitionGroupScroll($event)" class="chat-records ba-scroll-style"
                name="el-fade-in-linear" tag="div" :ref="kefu.common.messageScrollbarRef">
                <div class="chat-records-grow" key="chatRecordsGrow"></div>
                <div v-if="state.fileUploading" class="chat-record-item me">
                    <div class="record-avatar-img">
                        <img draggable="false" :src="getRecordUserInfo(kefu.state.userInfo.id, 'avatar')" />
                    </div>
                    <div class="record-content-box">
                        <div class="chat-record-nickname">{{ getRecordUserInfo(kefu.state.userInfo.id, 'nickname') }}
                        </div>
                        <div class="record-content uploading-file">
                            <div class="upload-header">
                                <i class="el-icon-document"></i>
                                <span>{{ kefu.t('file') }} {{ kefu.t('uploading') }}</span>
                            </div>
                            <div class="upload-progress-bar">
                                <div class="upload-progress" :style="{ width: state.uploadProgress + '%' }"></div>
                            </div>
                            <div class="upload-percentage">{{ state.uploadProgress }}%</div>
                        </div>
                    </div>
                </div>
                <template v-for="(item, idx) in kefu.state.sessionRecords.data" :key="idx">
                    <div v-for="(message, index) in item.data" :key="message.id ? message.id : message.content"
                        class="chat-record-item"
                        :class="[getRecordItemClass(message), { 'no-bubble': message.type === 'image' || message.type === 'file' }]">
                        <span v-if="message.type == 'system'">{{ message.content }}</span>
                        <template v-else>
                            <div class="record-avatar-img">
                                <img draggable="false" :src="getRecordUserInfo(message.sender_id, 'avatar')" />
                            </div>
                            <div class="record-content-box">
                                <div class="chat-record-nickname">{{ getRecordUserInfo(message.sender_id, 'nickname') }}
                                </div>
                                <div class="record-content"
                                    :class="{ 'transparent-bg': message.type === 'image' || message.type === 'file' }">
                                    <template v-if="message.type == 'text'">
                                        <div class="text-content">
                                            <MdPreview class="message-md-content" :id="'content-' + index"
                                                :editorId="'content-' + index" :modelValue="message.content" />
                                        </div>
                                    </template>
                                    <el-image :hide-on-click-modal="true"
                                        v-else-if="message.type == 'image' || (message.type == 'file' && isImageFile(message.extend.suffix))"
                                        :preview-src-list="[fullUrl(message.content)]" :src="fullUrl(message.content)"
                                        class="record-img"></el-image>
                                    <div v-else-if="message.type == 'file' && !isImageFile(message.extend.suffix)">
                                        <!-- 视频文件 -->
                                        <div v-if="isVideoFile(message.extend.suffix)" class="video-container">
                                            <video controls preload="metadata" class="record-media record-video"
                                                :src="fullUrl(message.content)">
                                                {{ kefu.t('browser_not_support_video') }}
                                            </video>
                                        </div>
                                        <!-- 音频文件 -->
                                        <audio v-else-if="isAudioFile(message.extend.suffix)" controls
                                            class="record-media record-audio" :src="fullUrl(message.content)">
                                            {{ kefu.t('browser_not_support_audio') }}
                                        </audio>
                                        <!-- 所有其他文件类型统一样式 -->
                                        <div v-else class="file-card">
                                            <div class="file-card-left">
                                                <div class="file-icon-wrapper">
                                                    <img class="file-icon"
                                                        :src="buildSuffixSvgUrl(message.extend.suffix)" alt="" />
                                                </div>
                                                <div class="file-info">
                                                    <div class="file-name" :title="message.extend.name"
                                                        style="color: #000000 !important;">{{
                                                        message.extend.name }}</div>
                                                    <div class="file-size" style="color: #606266 !important;">{{
                                                        getFileSize(message.extend.size) }}</div>
                                                </div>
                                            </div>
                                            <div class="file-card-right">
                                                <el-button type="primary" size="small"
                                                    @click="downloadFile(message.content, message.extend.name)"
                                                    class="file-download-btn">
                                                    {{ kefu.t('download') }}
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                    <el-link target="_blank" type="success" v-else-if="message.type == 'link'"
                                        :href="message.content">
                                        {{ message.title ?? message.content }}
                                    </el-link>
                                    <div v-else-if="message.type == 'good'" class="record-card toolbar-data-item">
                                        <img class="data-item-logo" :src="message.extend.logo" />
                                        <div class="data-item-info">
                                            <div class="data-item-title">{{ message.extend.title }}</div>
                                            <div class="data-item-subtitle">{{ message.extend.subtitle }}</div>
                                            <div class="data-item-price">{{ message.extend.price }}</div>
                                        </div>
                                    </div>
                                    <div v-else-if="message.type == 'order'" class="record-card toolbar-data-item">
                                        <img class="data-item-logo" :src="message.extend.logo" />
                                        <div class="data-item-info">
                                            <div class="data-item-title">{{ message.extend.title }}</div>
                                            <div class="data-item-subtitle">{{ message.extend.subtitle }}</div>
                                            <div class="data-item-price">
                                                {{ message.extend.amount }} <span class="number">x{{
                                                    message.extend.number }}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="message.sender_id == kefu.state.userInfo.id && message.status == 'read'"
                                        class="read-status">✓</div>
                                </div>
                            </div>
                        </template>
                    </div>

                    <!-- 日期 -->
                    <div class="chat-record-item system">
                        <span>{{ item.datetime }}</span>
                    </div>
                </template>
            </TransitionGroup>
            
            <!-- 移动端工具栏 -->
            <div class="mobile-toolbar" v-if="isMobile">
                <div class="mobile-toolbar-item" @click="toggleMobileToolbar">
                    <i class="el-icon-plus"></i>
                </div>
                <div class="mobile-toolbar-panel" v-show="state.mobileToolbarVisible">
                    <div class="mobile-toolbar-row">
                        <div class="mobile-toolbar-btn" @click="onMobileEmoji">
                            <i class="el-icon-sunny"></i>
                            <span>{{ kefu.t('send_emoji') }}</span>
                        </div>
                        <div class="mobile-toolbar-btn" @click="onMobileImage">
                            <i class="el-icon-picture"></i>
                            <span>{{ kefu.t('send_image') }}</span>
                        </div>
                        <div class="mobile-toolbar-btn" @click="onMobileFile">
                            <i class="el-icon-document"></i>
                            <span>{{ kefu.t('send_file') }}</span>
                        </div>
                    </div>
                    <div class="mobile-toolbar-row" v-if="kefu.config?.goods_api && kefu.config?.send_goods_identity.includes(kefu.state.userInfo.identity)">
                        <div class="mobile-toolbar-btn" @click="onMobileGoods">
                            <i class="el-icon-goods"></i>
                            <span>{{ kefu.t('send_goods') }}</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 隐藏的文件输入元素，用于移动端 -->
            <input 
                v-if="isMobile"
                @change="onFileUpload('image', $event, mobileImageRef)" 
                type="file" 
                name="mobile-image" 
                accept="image/*" 
                ref="mobileImageRef" 
                style="display: none;"
            />
            <input 
                v-if="isMobile"
                @change="onFileUpload('file', $event, mobileFileRef)" 
                type="file" 
                name="mobile-file" 
                ref="mobileFileRef" 
                style="display: none;"
            />
            
            <div class="message-textarea-box">
                <div v-if="kefu.state.sessionUserInputStatus" class="message-input-status">{{ kefu.t('typing') }}</div>
                
                <!-- 桌面端工具栏 -->
                <div class="toolbar" v-if="!isMobile">
                    <el-popover v-model:visible="state.toolVisible.emoji" placement="top-start" :teleported="false"
                        :width="346" trigger="hover">
                        <ol class="emojis">
                            <li v-for="(emoji, index) of emojis" :key="`emoji-${index}`" @click="onEmojiHandler(emoji)"
                                v-text="emoji"></li>
                        </ol>
                        <template #reference>
                            <div class="toolbar-item" :class="state.toolVisible.emoji ? 'active' : ''">
                                <i :title="kefu.t('send_emoji')" class="toolbar-icon smiley"></i>
                            </div>
                        </template>
                    </el-popover>

                    <div class="toolbar-item select-file">
                        <input @change="onFileUpload('image', $event, imageRef!)" :title="kefu.t('send_image')" size="1"
                            width="24" type="file" name="image" accept="image/*" ref="imageRef" />
                        <i class="toolbar-icon image"></i>
                    </div>
                    <div class="toolbar-item select-file">
                        <input @change="onFileUpload('file', $event, fileRef!)" :title="kefu.t('send_file')" size="1"
                            width="24" type="file" name="file" ref="fileRef" />
                        <i class="toolbar-icon file"></i>
                    </div>

                    <el-popover v-model:visible="state.toolVisible.goods" placement="top-start" :teleported="false"
                        :width="340" trigger="click" :popper-style="{
                            padding: '0',
                        }" :hide-after="0"
                        v-if="kefu.config?.goods_api && kefu.config?.send_goods_identity.includes(kefu.state.userInfo.identity)">
                        <div class="toolbar-data-box">
                            <div class="ba-center toolbar-loading-box" v-if="state.commonLoading">
                                <Icon name="el-icon-Loading" class="is-loading" />
                            </div>
                            <div class="toolbar-data-list ba-scroll-style" v-else>
                                <template v-if="state.goods.length">
                                    <div class="toolbar-data-item" v-for="(item, idx) in state.goods" :key="idx"
                                        @click="onSendGood(item)">
                                        <img class="data-item-logo" :src="item.image" />
                                        <div class="data-item-info">
                                            <div class="data-item-title">{{ item.title }}</div>
                                            <div class="data-item-subtitle">{{ item.subtitle }}</div>
                                            <div class="data-item-price">{{ item.price }}</div>
                                        </div>
                                        <input class="data-item-radio" name="goods" type="radio" :value="item.id" />
                                    </div>
                                </template>
                                <el-empty v-else :image-size="40" :description="kefu.t('no_data')" />
                            </div>
                        </div>
                        <template #reference>
                            <div class="toolbar-item" :class="state.toolVisible.goods ? 'active' : ''"
                                @click="onShowGoods">
                                <i :title="kefu.t('send_goods')" class="toolbar-icon goods"></i>
                            </div>
                        </template>
                    </el-popover>
                    <el-popover v-model:visible="state.toolVisible.orders" placement="top-start" :teleported="false"
                        :width="340" trigger="click" :popper-style="{
                            padding: '0',
                        }" :hide-after="0"
                        v-if="kefu.config?.orders_api && kefu.config?.send_orders_identity.includes(kefu.state.userInfo.identity)">
                        <div class="toolbar-data-box">
                            <div class="ba-center toolbar-loading-box" v-if="state.commonLoading">
                                <Icon name="el-icon-Loading" class="is-loading" />
                            </div>
                            <div class="toolbar-data-list ba-scroll-style" v-else>
                                <template v-if="state.orders.length">
                                    <div class="toolbar-data-item" v-for="(item, idx) in state.orders" :key="idx"
                                        @click="onSendOrder(item)">
                                        <img class="data-item-logo" :src="item.logo" />
                                        <div class="data-item-info">
                                            <div class="data-item-title">{{ item.title }}</div>
                                            <div class="data-item-subtitle">{{ item.subtitle }}</div>
                                            <div class="data-item-price">
                                                {{ item.amount }} <span class="number">x{{ item.number }}</span>
                                            </div>
                                        </div>
                                        <input class="data-item-radio" name="order" type="radio" :value="item.id" />
                                    </div>
                                </template>
                                <el-empty v-else :image-size="40" :description="kefu.t('no_data')" />
                            </div>
                        </div>
                        <template #reference>
                            <div class="toolbar-item" :class="state.toolVisible.orders ? 'active' : ''"
                                @click="onShowOrders">
                                <i :title="kefu.t('send_order')" class="toolbar-icon order"></i>
                            </div>
                        </template>
                    </el-popover>
                    <div class="file-destroy-notice">
                        <i class="el-icon-warning"></i><strong>{{ kefu.t('file_destroy_notice') }}</strong>
                    </div>

                    <div v-if="kefu.state.userInfo.identity == 'csr'" class="toolbar-right">
                        <el-popover placement="top" :width="250" trigger="hover" :popper-style="{
                            padding: 0,
                        }">
                            <template #default>
                                <div class="quick-reply-list ba-scroll-style">
                                    <div v-for="(item, idx) in kefu.state.quickReply"
                                        @click="onQuickReply(item.content)" :key="idx" class="quick-reply-item">
                                        {{ item.content }}
                                    </div>
                                </div>
                            </template>
                            <template #reference>
                                <div class="quick-reply">{{ kefu.t('quick_reply') }}</div>
                            </template>
                        </el-popover>
                    </div>
                </div>
                
                <textarea @input="onMessageInput($event)" @blur="onMessageBlur()" class="ba-scroll-style"
                    id="message-text-input" rows="3" @keyup.alt.enter="onSendMessage" @keyup.ctrl.enter="onSendMessage"
                    v-model="kefu.state.messageInputValue" :ref="kefu.common.messageInputRef"></textarea>
                <div class="message-textarea-footer">
                    <span class="send-tip">{{ kefu.t('send_tip') }}</span>
                    <el-button :loading="kefu.state.sendMessageLoading" :disabled="kefu.state.sendMessageLoading"
                        type="primary" @click="onSendMessage" size="small" class="send-btn">{{ kefu.t('send') }}</el-button>
                </div>
            </div>
        </template>
        <div v-else class="unselected-session"></div>
    </div>
</template>

<script setup lang="ts">
import { isEmpty, debounce } from 'lodash-es'
import { nextTick, reactive, ref, onMounted, computed } from 'vue'
import { fullUrl } from '@/utils/common'
import { MdPreview } from 'md-editor-v3'
import { emojis } from '@/components/kefu/store'
import useCurrentInstance from '@/utils/useCurrentInstance'
import type kefuClass from '@/components/kefu/index'
import 'md-editor-v3/lib/preview.css'
import { uuid } from '@/utils/random'
import { buildSuffixSvgUrl } from '@/api/kefu/index'
import { goods, orders } from '@/api/kefu/index'
import { Local } from '@/utils/storage'
import { BA_KEFU_TOURIST_TOKEN } from '@/components/kefu/store'
import { getToken } from '@/utils/auth'
import { useUserStore } from '@/store/user';

const fileRef = ref<HTMLInputElement>()
const imageRef = ref<HTMLInputElement>()
const mobileImageRef = ref<HTMLInputElement>()
const mobileFileRef = ref<HTMLInputElement>()
const { proxy } = useCurrentInstance()
const kefu = proxy.kefu as kefuClass
const userStore = useUserStore();

// 移动端检测
const isMobile = computed(() => {
    return window.innerWidth <= 768
})

// 调试信息（开发环境）
if (process.env.NODE_ENV === 'development') {
    console.log('Kefu Window - Mobile detection:', isMobile.value)
}

const state: {
    recordsHeight: string
    toolVisible: {
        emoji: boolean
        goods: boolean
        orders: boolean
    }
    commonLoading: boolean
    messageInputState: string
    goods: anyObj[]
    orders: anyObj[]
    fileUploading: boolean
    uploadProgress: number
    mobileToolbarVisible: boolean
} = reactive({
    recordsHeight: 'calc(100% - 139px)',
    toolVisible: {
        emoji: false,
        goods: false,
        orders: false,
    },
    commonLoading: false,
    messageInputState: 'blur',
    goods: [],
    orders: [],
    fileUploading: false,
    uploadProgress: 0,
    mobileToolbarVisible: false,
})

/**
 * 组件挂载时自动聚焦文本框
 */
onMounted(() => {
    nextTick(() => {
        if (kefu.common.messageInputRef.value) {
            kefu.common.messageInputRef.value.focus()
        }
    })
    
    // 监听窗口大小变化
    window.addEventListener('resize', handleResize)
})

// 处理窗口大小变化
const handleResize = debounce(() => {
    // 重新计算记录区域高度
    if (kefu.common.messageInputRef.value) {
        const elem = kefu.common.messageInputRef.value
        const height = elem.scrollHeight > 200 ? 200 : elem.scrollHeight
        state.recordsHeight = 'calc(100% - ' + (height + (isMobile.value ? 120 : 75)) + 'px)'
    }
}, 300)

/**
 * 聊天记录项的 class
 */
const getRecordItemClass = (message: anyObj) => {
    if (message.type == 'system') {
        return 'system'
    }
    return message.sender_id == kefu.state.userInfo.id ? 'me' : 'you'
}

/**
 * 聊天记录用户信息
 */
const getRecordUserInfo = (id: number, key: string) => {
    let value = kefu.state.sessionRecords.users[id] ? kefu.state.sessionRecords.users[id][key] : ''
    if (key == 'avatar' && value) {
        value = fullUrl(value)
    }
    return value
}

const onMessageInput = debounce((el: Event) => {
    const elem = el.target as HTMLInputElement
    elem.style.height = 'auto'
    const height = elem.scrollHeight > 200 ? 200 : elem.scrollHeight
    state.recordsHeight = 'calc(100% - ' + (height + (isMobile.value ? 120 : 75)) + 'px)'
    elem.style.height = height + 'px'
    elem.scrollTop = height

    if (state.messageInputState == 'blur') {
        kefu.sendMessageInputState('input')
        state.messageInputState = 'input'
    }
}, 300)

const onMessageBlur = debounce(() => {
    if (state.messageInputState == 'input') {
        kefu.sendMessageInputState('blur')
        state.messageInputState = 'blur'
    }
}, 300)

const onEmojiHandler = (emoji: string) => {
    // 将 emoji 插入到 messageInput.value 的光标位置
    const start = kefu.common.messageInputRef.value!.selectionStart
    const end = kefu.common.messageInputRef.value!.selectionEnd
    kefu.state.messageInputValue = kefu.state.messageInputValue.substring(0, start) + emoji + kefu.state.messageInputValue.substring(end)

    nextTick(() => {
        kefu.common.messageInputRef.value!.focus()
        kefu.common.messageInputRef.value!.setSelectionRange(start + emoji.length, start + emoji.length)
        state.toolVisible.emoji = false
    })
}

const onSendMessage = () => {
    if (kefu.state.sendMessageLoading || !kefu.state.messageInputValue) return

    kefu.sendSessionMessage('text', kefu.state.messageInputValue)
    kefu.state.messageInputValue = ''
    kefu.messageInputFocus()

    if (state.messageInputState == 'input') {
        kefu.sendMessageInputState('blur')
        state.messageInputState = 'blur'
    }
}

/**
 * 聊天记录框滚动条滚动
 */
const transitionGroupScroll = debounce((e: Event) => {
    const target = e.target as HTMLDivElement
    const scrollTop = Math.abs(target.scrollTop)
    const scrollHeight = target.scrollHeight
    const clientHeight = target.clientHeight

    if (scrollTop + clientHeight + 10 >= scrollHeight) {
        kefu.state.sessionRecords.page++
        kefu.loadSessionRecords()
    }
}, 300)

const onQuickReply = (content: string) => {
    kefu.state.messageInputValue += content
    kefu.messageInputFocus()
}

// 移动端工具栏控制
const toggleMobileToolbar = () => {
    state.mobileToolbarVisible = !state.mobileToolbarVisible
}

const onMobileEmoji = () => {
    state.mobileToolbarVisible = false
    // 在移动端显示表情选择器
    // 这里可以集成移动端表情选择器
}

const onMobileImage = () => {
    state.mobileToolbarVisible = false
    if (mobileImageRef.value) {
        mobileImageRef.value.click()
    }
}

const onMobileFile = () => {
    state.mobileToolbarVisible = false
    if (mobileFileRef.value) {
        mobileFileRef.value.click()
    }
}

const onMobileGoods = () => {
    state.mobileToolbarVisible = false
    onShowGoods()
}

const onFileUpload = (type: string, e: Event, inputRef: HTMLInputElement) => {
    const files = (e.target as HTMLInputElement).files
    if (!files) return
    let fd = new FormData()
    fd.append('file', files[0])
    inputRef.value = ''

    // 显示上传进度消息
    state.fileUploading = true
    state.uploadProgress = 0

    // 滚动到最新消息位置，确保上传进度条可见
    nextTick(() => {
        if (kefu.common.messageScrollbarRef.value) {
            const el = kefu.common.messageScrollbarRef.value
            el.scrollTop = 0
        }
    })

    // 创建一个请求配置，包括上传进度回调
    const config = {
        uuid: uuid(),
        onUploadProgress: (progressEvent: any) => {
            const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
            state.uploadProgress = percentCompleted
        }
    }

    // 模拟进度增长（慢速增长，停在95%）
    let testProgress = 0
    const testInterval = setInterval(() => {
        // 让进度增长变慢，每次只增加2%
        testProgress += 2
        // 如果进度达到95%，就暂停在95%，等待实际上传完成
        if (testProgress >= 95) {
            state.uploadProgress = 95
            clearInterval(testInterval)
        } else {
            state.uploadProgress = testProgress
        }
    }, 300) // 间隔增加到300ms，让整体速度更慢

    kefu.fileUpload(fd, config).then((res) => {
        // 先将进度设置为100%，确保视觉上完成
        state.uploadProgress = 100
        clearInterval(testInterval)

        // 短暂延迟后发送实际消息并隐藏进度条
        setTimeout(() => {
            kefu.sendSessionMessage(type, res.data.file.url, {
                size: res.data.file.size,
                name: res.data.file.name,
                suffix: res.data.file.suffix,
            })

            // 隐藏上传进度条
            state.fileUploading = false
            state.uploadProgress = 0
        }, 300)
    }).catch(() => {
        // 失败时也需要隐藏进度条
        clearInterval(testInterval)
        setTimeout(() => {
            state.fileUploading = false
            state.uploadProgress = 0
        }, 300)
    })
}

const onShowGoods = () => {
    if (!kefu.config?.goods_api || state.toolVisible.goods) return

    state.goods = Local.get('recentlyViewed') || [];
    // state.commonLoading = true

    // goods(kefu.config.goods_api, {
    //     ba_token: Local.get('refresh_token'),
    //     ba_user_token: getToken(),
    //     user_id: userStore.userInfo.id,
    //     ba_tourist_token: Local.get(BA_KEFU_TOURIST_TOKEN),
    // })
    //     .then((res) => {
    //         state.goods = res.data
    //     })
    //     .finally(() => {
    //         state.commonLoading = false
    //     })


}

const onSendGood = (good: anyObj) => {
    state.toolVisible.goods = false
    kefu.sendSessionMessage('good', good.title, good)
}

const onSendOrder = (order: anyObj) => {
    state.toolVisible.orders = false
    kefu.sendSessionMessage('order', order.title, order)
}

const onShowOrders = () => {
    if (!kefu.config?.orders_api) return

    state.commonLoading = true

    orders(kefu.config.orders_api, {
        ba_token: Local.get('refresh_token'),
        ba_user_token: getToken(),
        user_id: userStore.userInfo.id,
        ba_tourist_token: Local.get(BA_KEFU_TOURIST_TOKEN),
    })
        .then((res) => {
            if (!res.data?.result) return;
            state.orders = res.data.result
        })
        .finally(() => {
            state.commonLoading = false
        })
}

const getFileSize = (byte: string) => {
    const size = parseFloat(byte)
    const i = Math.floor(Math.log(size) / Math.log(1024))
    return (size / Math.pow(1024, i)).toFixed(i < 1 ? 0 : 2) + ' ' + ['B', 'KB', 'MB', 'GB', 'TB'][i]
}

/**
 * 判断是否为视频文件
 */
const isVideoFile = (suffix: string) => {
    const videoTypes = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'webm', '3gp', 'm4v']
    return videoTypes.includes(suffix.toLowerCase())
}

/**
 * 判断是否为音频文件
 */
const isAudioFile = (suffix: string) => {
    const audioTypes = ['mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a', 'wma', 'aiff']
    return audioTypes.includes(suffix.toLowerCase())
}

/**
 * 判断是否为图片文件
 */
const isImageFile = (suffix: string) => {
    const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg', 'ico', 'tiff', 'tif']
    return imageTypes.includes(suffix.toLowerCase())
}

/**
 * 判断是否为PDF文件
 */
const isPdfFile = (suffix: string) => {
    return suffix.toLowerCase() === 'pdf'
}

/**
 * 判断是否为Office文件
 */
const isOfficeFile = (suffix: string) => {
    const officeTypes = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx']
    return officeTypes.includes(suffix.toLowerCase())
}

/**
 * 判断是否为文本文件
 */
const isTextFile = (suffix: string) => {
    const textTypes = ['txt', 'log', 'json', 'xml', 'html', 'css', 'js', 'ts', 'md', 'yaml', 'yml', 'ini', 'conf', 'sh', 'bat']
    return textTypes.includes(suffix.toLowerCase())
}

/**
 * 获取文件类型徽章的颜色
 */
const getFileTypeBadgeColor = (suffix: string) => {
    const lowerSuffix = suffix.toLowerCase();

    // 文档类型
    if (['doc', 'docx', 'txt', 'pdf', 'ppt', 'pptx', 'xls', 'xlsx'].includes(lowerSuffix)) {
        return '#3a8ee6'; // 蓝色
    }

    // 图片类型
    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(lowerSuffix)) {
        return '#67c23a'; // 绿色
    }

    // 音频视频类型
    if (['mp3', 'wav', 'mp4', 'avi', 'mov', 'flv'].includes(lowerSuffix)) {
        return '#e6a23c'; // 黄色
    }

    // 压缩文件类型
    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(lowerSuffix)) {
        return '#f56c6c'; // 红色
    }

    // 代码和脚本类型
    if (['js', 'ts', 'html', 'css', 'php', 'py', 'java', 'c', 'cpp', 'json'].includes(lowerSuffix)) {
        return '#9c27b0'; // 紫色
    }

    // 默认颜色
    return '#909399'; // 灰色
}

const downloadFile = (url: string, name: string) => {
    const a = document.createElement('a')
    a.href = url
    a.download = name
    a.click()
}
</script>

<style scoped lang="scss">
// 移动端适配的基础样式
.kefu-window-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

// 移动端工具栏样式
.mobile-toolbar {
    position: relative;
    padding: 8px 10px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    
    .mobile-toolbar-item {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--el-color-primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
            background: var(--el-color-primary-light-3);
        }
        
        i {
            font-size: 18px;
        }
    }
    
    .mobile-toolbar-panel {
        position: absolute;
        bottom: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 15px;
        margin-bottom: 5px;
        
        .mobile-toolbar-row {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
            
            &:last-child {
                margin-bottom: 0;
            }
        }
        
        .mobile-toolbar-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 12px 8px;
            border-radius: 8px;
            background: #f8f9fa;
            cursor: pointer;
            transition: all 0.3s ease;
            min-height: 60px;
            justify-content: center;
            
            &:hover {
                background: var(--el-color-primary-light-9);
            }
            
            i {
                font-size: 24px;
                color: var(--el-color-primary);
                margin-bottom: 4px;
            }
            
            span {
                font-size: 12px;
                color: var(--el-text-color-regular);
                text-align: center;
            }
        }
    }
}

.toolbar-data-box {
    .toolbar-loading-box {
        height: 50px;
    }

    .toolbar-data-list {
        max-height: 500px;
        overflow-y: auto;
        overflow-x: hidden;

        .toolbar-data-item:hover {
            background-color: var(--el-color-info-light-9);
        }
    }
}

.toolbar-data-item {
    display: flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;

    .data-item-logo {
        width: 80px;
        object-fit: cover;
    }

    .data-item-info {
        display: block;
        padding: 0 10px;
        width: calc(100% - 93px);

        .data-item-title {
            height: 32px;
            font-size: 14px;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            line-height: 16px;
            font-weight: bold;
        }

        .data-item-subtitle {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 2px;
        }

        .data-item-price {
            margin-left: -3px;
            font-size: 18px;
            color: rgba(231, 76, 60, 1);

            .number {
                color: #999999;
                font-size: 14px;
            }
        }
    }

    .data-item-radio {
        width: 13px;
    }
}

.unselected-session {
    height: 100%;
    background: url(/@/assets/kefu/bg.png) no-repeat center;
    background-size: 300px 171px;
}

.message-md-content {
    background: transparent;

    :deep(.default-theme p) {
        padding: 0;
        line-height: 1.3;
    }

    :deep(.md-editor-preview) {
        font-size: 15px;
    }

    :deep(.md-editor-preview-wrapper) {
        padding: 0;
        overflow: hidden;
    }

    :deep(.default-theme ul li) {
        margin: 0;
    }

    :deep(a) {
        color: var(--el-color-primary);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

.me {
    .message-md-content {
        :deep(.default-theme) {
            --md-theme-color: var(--el-color-white);
            --md-theme-code-inline-color: var(--el-color-black);
            --md-theme-bg-color-inset: #fff;

            blockquote {
                color: #000;
            }

            a {
                color: var(--el-color-warning);
            }
        }
    }
}

.messages-loading {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    top: 4px;
}

.chat-records {
    display: flex;
    flex-direction: column-reverse;
    height: v-bind('state.recordsHeight');
    padding: 0 5px 10px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;

    .chat-records-grow {
        flex-grow: 1;
        flex-shrink: 1;
    }

    .chat-record-item {
        display: flex;
        padding-top: 16px;
        align-items: flex-start;
    }

    .system span {
        font-size: 12px;
        display: inline-block;
        background: var(--el-color-info-light-8);
        color: var(--el-text-color-primary);
        line-height: 12px;
        border-radius: 5px;
        padding: 5px 10px 3px 10px;
        text-align: center;
        word-wrap: break-word;
        word-break: break-all;
        margin: 0 auto;
    }

    .record-avatar-img {
        position: relative;
        display: inline-block;
        background: transparent;
        width: 36px;
        height: 36px;
        cursor: pointer;
        user-select: none;

        img {
            height: 100%;
            width: 100%;
            border-radius: 6px;
        }
    }

    .record-content-box {
        position: relative;
        max-width: 75%;
        margin: 0 13px;
    }

    .me {
        flex-direction: row-reverse;
        display: flex;
        justify-content: flex-start;
        align-content: center;
    }

    .chat-record-nickname {
        color: var(--el-text-color-secondary);
        padding-bottom: 3px;
    }

    .you .chat-record-nickname {
        text-align: left;
    }

    .you .record-content {
        color: #000;
        background: var(--el-color-info-light-9);

        .el-link {
            --el-link-text-color: var(--el-color-success);
        }

        &.transparent-bg {
            background: transparent;
            padding: 0;
        }
    }

    .me .chat-record-nickname {
        text-align: right;
    }

    .me .record-content {
        margin-left: auto;
        color: var(--el-color-white);
        background: var(--el-color-primary);

        .el-link {
            --el-link-text-color: var(--el-color-warning);

            &:hover {
                --el-link-hover-text-color: var(--el-color-warning);
            }
        }

        &.transparent-bg {
            background: transparent;
            padding: 0;
        }
    }

    .you .record-content-box:before {
        left: -4px;
        background: var(--el-color-info-light-9);
    }

    .me .record-content-box:before {
        right: -4px;
        background: var(--el-color-primary);
    }

    .no-bubble .record-content-box:before {
        display: none;
    }

    .me .data-item-price {
        .number {
            color: #fff;
        }
    }

    .record-content-box:before {
        position: absolute;
        top: 26px;
        display: block;
        width: 8px;
        height: 6px;
        content: '\00a0';
        -webkit-transform: rotate(29deg) skew(-35deg);
        transform: rotate(29deg) skew(-35deg);
    }

    .chat-record-item.no-bubble .record-content-box {
        background-color: transparent !important;
    }

    .record-content {
        font-size: 14px;
        color: var(--el-text-color-primary);
        padding: 12px 10px;
        border-radius: 5px;
        position: relative;
        width: fit-content;
        word-wrap: break-word;
        word-break: break-all;

        .record-img,
        .el-image {
            vertical-align: bottom;
            max-width: 200px;
            max-height: 200px;
            width: auto;
            height: auto;
            cursor: pointer;
            user-select: none;
            border: 1px solid transparent;
        }

        .video-container {
            max-width: 240px;
            max-height: 180px;
            background: #000;
            border-radius: 4px;
            overflow: hidden;
        }

        .record-media {
            border-radius: 4px;
        }

        .record-video {
            width: 100%;
            height: auto;
            max-height: 180px;
            display: block;
            object-fit: contain;
        }

        .record-audio {
            width: 240px;
            height: 40px;
            display: block;
        }

        .record-file {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #ffffff, #f5f7fa);
            border-radius: 12px;
            padding: 14px;
            max-width: 380px;
            border: 1px solid rgba(220, 223, 230, 0.7);
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
            transition: all 0.25s ease;

            &:hover {
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
                transform: translateY(-2px);
                border-color: #c0c4cc;
            }

            .file-icon-container {
                position: relative;
                text-align: center;
                margin-right: 8px;
                min-width: 56px;

                .file-icon {
                    width: 56px;
                    height: 56px;
                    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
                    transition: transform 0.2s ease;

                    &:hover {
                        transform: scale(1.05);
                    }
                }

                .file-type-badge {
                    position: absolute;
                    bottom: -3px;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 10px;
                    font-weight: bold;
                    color: #fff;
                    padding: 2px 6px;
                    border-radius: 4px;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
                    min-width: 24px;
                    text-align: center;
                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
                    letter-spacing: 0.5px;
                }
            }

            .file-info {
                padding: 0 16px;
                flex: 1;
                min-width: 0;
                width: 180px;
                display: block;

                .file-name {
                    font-weight: bold;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #000000;
                    font-size: 15px;
                    margin-bottom: 6px;
                    transition: color 0.2s;
                    text-shadow: 0 0 1px rgba(0, 0, 0, 0.05);

                    &:hover {
                        color: #409EFF;
                    }
                }

                .file-size {
                    padding-top: 2px;
                    font-size: 12px;
                    color: #606266;
                    display: flex;
                    align-items: center;
                    font-weight: 500;

                    &::before {
                        content: "";
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        background-color: #67C23A;
                        border-radius: 50%;
                        margin-right: 6px;
                        opacity: 0.8;
                    }
                }
            }

            .file-download-btn {
                white-space: nowrap;
                border-radius: 20px;
                font-weight: bold;
                padding: 8px 16px;
                box-shadow: 0 2px 6px rgba(64, 158, 255, 0.25);
                transition: all 0.25s;
                margin-left: auto;

                &:hover {
                    transform: translateY(-1px);
                    box-shadow: 0 4px 10px rgba(64, 158, 255, 0.35);
                }

                &:active {
                    transform: translateY(1px);
                }
            }
        }

        .text-content {
            display: flex;
            align-items: center;
        }

        .record-card {
            width: 300px;
        }
    }

    .read-status {
        position: absolute;
        left: 0;
        left: -30px;
        bottom: 0;
        font-size: 14px;
        font-weight: bold;
        color: #67C23A;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.message-textarea-box {
    position: relative;
    padding-left: 10px;
    border-top: 1px solid #dadada;
    background: #f3f3f3;

    .file-destroy-notice {
        margin-left: 5px;
        margin-right: 10px;
        color: #F56C6C;
        font-size: 12px;
        display: flex;
        align-items: center;

        i {
            margin-right: 3px;
            font-size: 14px;
        }

        strong {
            font-weight: bold;
        }
    }

    .message-input-status {
        position: absolute;
        line-height: 30px;
        top: -30px;
        color: var(--el-color-primary);
        padding-left: 6px;
    }

    .toolbar {
        display: flex;
        align-items: center;
        margin: 6px 0 0 0;

        .toolbar-item {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            margin-right: 10px;
            vertical-align: middle;
            cursor: pointer;

            .toolbar-icon {
                display: inline-block;
                width: 24px;
                height: 24px;
                vertical-align: middle;
            }

            &:hover {
                background-color: #ebebeb;
            }

            .smiley {
                background: url('@/assets/kefu/smiley.png') no-repeat center;
                background-size: 80% 80%;
            }

            .image {
                background: url('@/assets/kefu/image.png') no-repeat center;
                background-size: 80% 80%;
            }

            .file {
                background: url('@/assets/kefu/attachment.png') no-repeat center;
                background-size: 80% 80%;
            }

            .goods {
                background: url('@/assets/kefu/goods.png') no-repeat center;
                background-size: 80% 80%;
            }

            .order {
                background: url('@/assets/kefu/order.png') no-repeat center;
                background-size: 80% 80%;
            }
        }

        .toolbar-item.active {
            background-color: #ebebeb;
        }

        .toolbar-right {
            margin-left: auto;
            padding-right: 5px;

            .quick-reply {
                font-size: 13px;
                color: var(--el-color-info);
                cursor: pointer;
            }
        }

        .select-file {
            position: relative;

            input {
                filter: alpha(opacity=0);
                opacity: 0;
                width: 26px;
                height: 26px;
                display: inline-block;
                position: absolute;
                z-index: 2;
                text-indent: -9999px;
                cursor: pointer;
            }

            .image {
                position: absolute;
                z-index: 1;
            }
        }
    }

    .emojis {
        overflow-y: auto;
        padding-top: 1px;
        padding-left: 1px;

        li {
            display: flex;
            align-items: center;
            justify-content: center;
            float: left;
            height: 30px;
            width: 30px;
            font-size: 16px;
            overflow: hidden;
            margin: -1px 0 0 -1px;
            padding: 2px;
            text-align: center;
            list-style: none;
            z-index: 11;
            user-select: none;
            cursor: pointer;

            &:hover {
                position: relative;
                z-index: 12;
                background-color: #ebebeb;
            }
        }
    }

    textarea {
        width: 100%;
        border: none;
        background-color: transparent;
        padding: 5px 0;
        line-height: 18px;
        font-size: 15px;
        outline: none;
        resize: none;

        caret-color: #409eff;
        caret-width: 2px;

        &::after {
            content: '';
            position: absolute;
            right: 4px;
            top: 2px;
            width: 2px;
            background-color: #000;
            animation: blink 1s infinite;
        }

        &:focus {
            outline: none;
            border: none;
            box-shadow: none;
        }
    }

    .message-textarea-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: var(--el-font-size-small);
        color: var(--el-text-color-placeholder);
        margin-top: 8px;
        padding-right: 5px;

        .send-tip {
            padding: 0 8px;
        }
        
        .send-btn {
            min-width: 60px;
        }
    }
}

.quick-reply-list {
    display: block;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: 1px solid var(--el-color-info-light-9);

    .quick-reply-item {
        display: block;
        padding: 10px 0 10px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom: 1px solid var(--el-color-info-light-9);
        cursor: pointer;
        user-select: none;

        &:hover {
            background: var(--el-color-info-light-9);
        }
    }
}

.uploading-file {
    background-color: #4095ff !important;
    color: white !important;
    padding: 12px !important;
    font-size: 14px !important;

    .upload-header {
        margin-bottom: 10px;
        display: flex;
        align-items: center;

        i {
            margin-right: 6px;
            font-size: 18px;
        }

        span {
            font-weight: bold;
        }
    }

    .upload-progress-bar {
        height: 6px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 3px;
        margin-bottom: 8px;

        .upload-progress {
            height: 100%;
            background-color: white;
            border-radius: 3px;
            transition: width 0.3s;
        }
    }

    .upload-percentage {
        text-align: center;
        font-weight: bold;
    }
}

/* 文件卡片样式 */
.file-card {
    background: #f0f2f5 !important;
    border: 1px solid #d0d3d9;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    max-width: 400px;

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .file-card-left {
        display: flex;
        align-items: center;
        overflow: hidden;
        flex: 1;
    }

    .file-icon-wrapper {
        position: relative;
        min-width: 48px;
        margin-right: 12px;

        .file-icon {
            width: 48px;
            height: 48px;
        }

        .file-type-badge {
            position: absolute;
            bottom: -3px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 10px;
            font-weight: bold;
            color: #fff;
            padding: 2px 6px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            min-width: 24px;
            text-align: center;
        }
    }

    .file-info {
        flex: 1;
        min-width: 0;
        overflow: hidden;

        .file-name {
            font-weight: bold;
            color: #000000 !important;
            font-size: 14px;
            margin-bottom: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 210px;
            background: transparent !important;
        }

        .file-size {
            color: #606266 !important;
            font-size: 12px;
            background: transparent !important;
        }
    }

    .file-card-right {
        margin-left: 12px;
    }

    .file-download-btn {
        white-space: nowrap;
    }
}

// 移动端响应式样式
@media (max-width: 768px) {
    .kefu-window-container {
        .chat-records {
            padding: 0 8px 8px 8px;
            
            .record-content-box {
                max-width: 85%;
                margin: 0 8px;
            }
            
            .record-avatar-img {
                width: 32px;
                height: 32px;
            }
            
            .record-content {
                padding: 10px 8px;
                font-size: 14px;
                
                .record-img,
                .el-image {
                    max-width: 150px;
                    max-height: 150px;
                }
                
                .video-container {
                    max-width: 200px;
                    max-height: 150px;
                }
                
                .record-audio {
                    width: 200px;
                }
                
                .record-card {
                    width: 250px;
                }
            }
            
            .system span {
                font-size: 11px;
                padding: 4px 8px 2px 8px;
            }
        }
        
        .message-textarea-box {
            padding: 8px;
            
            .toolbar {
                margin: 4px 0 0 0;
                
                .toolbar-item {
                    width: 32px;
                    height: 32px;
                    margin-right: 8px;
                    
                    .toolbar-icon {
                        width: 20px;
                        height: 20px;
                    }
                }
            }
            
            textarea {
                font-size: 16px; // 防止iOS缩放
                padding: 8px 0;
                line-height: 20px;
            }
            
            .message-textarea-footer {
                margin-top: 6px;
                
                .send-tip {
                    font-size: 11px;
                    padding: 0 4px;
                }
                
                .send-btn {
                    min-width: 50px;
                    height: 32px;
                    font-size: 12px;
                }
            }
        }
        
        .file-card {
            max-width: 280px;
            padding: 10px;
            
            .file-icon-wrapper {
                min-width: 40px;
                margin-right: 8px;
                
                .file-icon {
                    width: 40px;
                    height: 40px;
                }
            }
            
            .file-info {
                .file-name {
                    font-size: 13px;
                    max-width: 150px;
                }
                
                .file-size {
                    font-size: 11px;
                }
            }
            
            .file-download-btn {
                font-size: 11px;
                padding: 4px 8px;
            }
        }
        
        .toolbar-data-item {
            padding: 8px;
            
            .data-item-logo {
                width: 60px;
            }
            
            .data-item-info {
                padding: 0 8px;
                width: calc(100% - 73px);
                
                .data-item-title {
                    font-size: 13px;
                    height: 28px;
                }
                
                .data-item-subtitle {
                    font-size: 12px;
                }
                
                .data-item-price {
                    font-size: 16px;
                }
            }
        }
    }
}

// 超小屏幕适配
@media (max-width: 480px) {
    .kefu-window-container {
        .chat-records {
            padding: 0 4px 4px 4px;
            
            .record-content-box {
                max-width: 90%;
                margin: 0 4px;
            }
            
            .record-avatar-img {
                width: 28px;
                height: 28px;
            }
            
            .record-content {
                padding: 8px 6px;
                font-size: 13px;
                
                .record-img,
                .el-image {
                    max-width: 120px;
                    max-height: 120px;
                }
                
                .video-container {
                    max-width: 160px;
                    max-height: 120px;
                }
                
                .record-audio {
                    width: 160px;
                }
                
                .record-card {
                    width: 200px;
                }
            }
        }
        
        .message-textarea-box {
            padding: 6px;
            
            .toolbar {
                margin: 2px 0 0 0;
                
                .toolbar-item {
                    width: 28px;
                    height: 28px;
                    margin-right: 6px;
                    
                    .toolbar-icon {
                        width: 18px;
                        height: 18px;
                    }
                }
            }
            
            textarea {
                font-size: 16px;
                padding: 6px 0;
                line-height: 18px;
            }
            
            .message-textarea-footer {
                margin-top: 4px;
                
                .send-tip {
                    font-size: 10px;
                    padding: 0 2px;
                }
                
                .send-btn {
                    min-width: 45px;
                    height: 28px;
                    font-size: 11px;
                }
            }
        }
        
        .file-card {
            max-width: 240px;
            padding: 8px;
            
            .file-icon-wrapper {
                min-width: 36px;
                margin-right: 6px;
                
                .file-icon {
                    width: 36px;
                    height: 36px;
                }
            }
            
            .file-info {
                .file-name {
                    font-size: 12px;
                    max-width: 120px;
                }
                
                .file-size {
                    font-size: 10px;
                }
            }
            
            .file-download-btn {
                font-size: 10px;
                padding: 3px 6px;
            }
        }
    }
}

// 触摸优化
@media (hover: none) and (pointer: coarse) {
    .kefu-window-container {
        .chat-records {
            .record-content {
                .record-img,
                .el-image {
                    cursor: default;
                }
            }
        }
        
        .message-textarea-box {
            .toolbar {
                .toolbar-item {
                    min-height: 44px;
                    min-width: 44px;
                    
                    &:active {
                        background-color: #d0d0d0;
                    }
                }
            }
        }
        
        .file-card {
            .file-download-btn {
                min-height: 44px;
                min-width: 44px;
                
                &:active {
                    transform: scale(0.95);
                }
            }
        }
        
        .mobile-toolbar {
            .mobile-toolbar-item {
                min-height: 44px;
                min-width: 44px;
                
                &:active {
                    transform: scale(0.95);
                }
            }
            
            .mobile-toolbar-btn {
                min-height: 60px;
                
                &:active {
                    background: var(--el-color-primary-light-8);
                }
            }
        }
    }
}

// 横屏模式优化
@media (orientation: landscape) and (max-height: 500px) {
    .kefu-window-container {
        .chat-records {
            height: calc(100% - 100px);
        }
        
        .message-textarea-box {
            .toolbar {
                margin: 2px 0 0 0;
            }
            
            textarea {
                max-height: 60px;
            }
            
            .message-textarea-footer {
                margin-top: 2px;
            }
        }
    }
}
</style>
